import {Component} from 'react';
import {ScrollView} from "@tarojs/components";
import {connect} from "react-redux";
import './topiclist.less'

import {getTopicList, getNextList} from "../../actions/topiclist";
import Topicitem from "./topicitem";

type PageStateProps = {
  topic: {
    page: 1,
    limit: 20,
    list: [],
    topicinfo: {},
    replies: [],
    admireState: false  //点赞状态
  },
  menu: {
    cataData: any,
    currentCata: any,
    showDrawer: any
  }
}

type PageDispatchProps = {
  getTopicList: (object) => void,
  getNextList: (object) => any
  hideDrawer: () => void
}

type PageOwnProps = {}

type PageState = {
  tittle: ''
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps & PageState

interface TopicList {
  props: IProps;
}

// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-shadow
@connect(({ topic, menu}) => ({
  topic, menu
}), (dispatch) => ({
  getTopicList(params) {
    // @ts-ignore
    dispatch(getTopicList(params))
  },
  getNextList(params) {
    // @ts-ignore
    dispatch(getNextList(params))
  },
  changeCata(cata) {
    // @ts-ignore
    dispatch(changeCata(cata))
  }
}))
class TopicList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // @ts-ignore
      // eslint-disable-next-line react/no-unused-state
      title: '帖子列表'
    };
  }

  // 拉取数据
  // eslint-disable-next-line react/sort-comp
  onScrollToUpper = () => {
    // @ts-ignore
    // eslint-disable-next-line @typescript-eslint/no-shadow
    const {getTopicList, topic: {limit}, menu:{currentCata}} = this.props;
    getTopicList && getTopicList({ page: 1, limit, tab: currentCata.key });
  };

  // 触发分页请求 肯定是要请求下一页的  没有总页码
  onScrollToLower = () => {
    // @ts-ignore
    // eslint-disable-next-line @typescript-eslint/no-shadow
    const {getNextList, topic: {page, limit}, menu:{currentCata}} = this.props;
    getNextList && getNextList({ page: (page + 1), limit, tab: currentCata.key });
  };

  componentDidMount() {
    console.log('----TopicList props: ', this.props);
    this.onScrollToUpper();
  }

  render() {
    const { topic: {list} } = this.props;
    return (
      <ScrollView
        className='topiclist__list'
        scrollY
        enableBackToTop
        onScrollToUpper={()=>this.onScrollToUpper()}
        onScrollToLower={()=>this.onScrollToLower()}
      >
        {
          list&&(list.map(item=>{
            // @ts-ignore
            return <Topicitem item={item} key={item.id} />
          }))
        }
      </ScrollView>
    );
  }
}
export default TopicList;
